<template>
  <div id="app" class="sportArea">
    <div class="files-title">
      <h3>运动统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 运动总时长 <span>{{totalDuration}} 分钟</span>，运动量 <span>{{totalAmount}} J</span></p>
    </div>
    <line-bar ref="stackLineBar"  :chartData="chartData" :YAxis="YAxis" :stackBorderRadius="true" @ok="handleEmit"></line-bar>
    <div class="files-title">
      <h3>最喜爱的活动区域TOP3统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 最喜爱 <span>{{ areaName }}</span></p>
    </div>
    <line-bar ref="lineBar2"  :chartData="chartData2" :YAxis="YAxis2" :areaFormatter="true" @ok="handleEmit"></line-bar>
  </div>
</template>
<script>
import { StudengFiles } from '@/utils/skStudentFilesMixin.js'
import LineBar from "../modules/line-bar.vue";
export default {
  name: 'sportArea',
  mixins:[StudengFiles],
  data() {
    return {
      url: {
        query: '',
      },
      
      chartData:[
        {
          legendTitle:"室内运动量",
          type:"bar",
          stack:"sport",
          color:["#AEF87A","#01BABC"]
        },
        {
          legendTitle:"户外运动量",
          type:"bar",
          stack:"sport",  
          color:["#0091FF","#7049F0"]
        },
        {
          legendTitle:"室内运动步数",
          type:"bar",
          stack:"step",
          color:["#FFCC00","#FF6623"]
        },
        {
          legendTitle:"户外运动步数",
          type:"bar",
          stack:"step",  
          color:["#E76474","#E12945"]
        },
        {
          legendTitle:"室内运动时长",
          type:"line",
          color:["#73DD39"]
        },
        {
          legendTitle:"户外运动时长",
          type:"line",
          color:["#9eaeff"]
        },
      ],
      YAxis:[
        {
          name:"运动量",
          position:"left"
        },
        {
          name:"时长",
          position:"right"
        }
      ],
      chartData2:[
        {
          legendTitle:"TOP1",
          type:"bar",
          color:["#AEF87A","#01BABC"]
        },
        {
          legendTitle:"TOP2",
          type:"bar",
          color:["#0091FF","#7049F0"]
        },
        {
          legendTitle:"TOP3",
          type:"bar",
          color:["#F7734E","#E12945"]
        },
      ],
      YAxis2:[
        {
          name:"分钟",
          position:"left"
        }
      ],
      totalDuration:0,
      totalAmount:0,
      areaName:"",
      numList:[]
    }
  },
  components: {
    LineBar,
  },
  props:["dataForm","semesterName","className"],
  filters: {},

  computed: {},

  created() {},

  activated() {},


  methods: {
    
    // /查看单个幼儿数据
    initStudentChart(){
      this.getSportData()
      this.getAreaData();
    },
    // 运动统计
    async getSportData(){
      this.url.query = "/health/skSportRecord/getStudentTotalSprotByMonth"
      let data = await this.queryData();
      let categorys = [],xData = [];
      const monthColumns = this.dataForm.daysColums;
      let arr1 = [],arr2 = [],arr3 = [],arr4 = [],arr5 = [],arr6 = [];
      this.totalDuration = 0
      this.totalAmount = 0
      for(let rowIndex = 0; rowIndex < monthColumns.length; rowIndex++){
        const rowString = monthColumns[rowIndex].toString();
        categorys.push(rowString);
        //  0-室内 1 户外
        const inDoorData = data.find(item => item.month == rowString && item.areaType == 0);
        const outDoorData = data.find(item => item.month == rowString && item.areaType == 1);
        if (inDoorData){
          arr1.push(inDoorData.totalAmount)
          arr3.push(inDoorData.totalStepNumber)
          arr5.push(inDoorData.totalDuration)
          this.totalDuration += inDoorData.totalDuration
          this.totalAmount += inDoorData.totalAmount
        } else {
          arr1.push(0)
          arr3.push(0)
          arr5.push(0)
        }
        if (outDoorData) {
          arr2.push(outDoorData.totalAmount)
          arr4.push(outDoorData.totalStepNumber)
          arr6.push(outDoorData.totalDuration)
          this.totalDuration += outDoorData.totalDuration
          this.totalAmount += outDoorData.totalAmount
        }else{
          arr2.push(0)
          arr4.push(0)
          arr6.push(0)
        }
      }
      xData.push(arr1,arr2,arr3,arr4,arr5,arr6)
      this.$refs.stackLineBar.initEChart(categorys,xData,3)
    },
    // 区域
    async getAreaData(){
      this.url.query = "/management/skArea/getStudentFavoriteArea"
      const params = {
        areaType:"",
        byType:"month"
      }
      let data = await this.queryData(params);
      let categorys = [],xData = [];
      const monthColumns = this.dataForm.daysColums;
      let arr1 = [],arr2 = [],arr3 = [];
      for(let rowIndex = 0; rowIndex < monthColumns.length; rowIndex++){
        const rowString = monthColumns[rowIndex].toString();
        categorys.push(rowString);
        const TOP1 = data.find(item => item.statisticalDate == rowString && item.topNum == 1);
        const TOP2 = data.find(item => item.statisticalDate == rowString && item.topNum == 2);
        const TOP3 = data.find(item => item.statisticalDate == rowString && item.topNum == 3);
        if (TOP1) {
          arr1.push({value:TOP1.duration,areaName:TOP1.areaName})
        } else {
          arr1.push(0)
        }
        if (TOP2) {
          arr2.push({value:TOP2.duration,areaName:TOP2.areaName})
        } else {
          arr2.push(0)
        }
        if (TOP3) {
          arr3.push({value:TOP3.duration,areaName:TOP3.areaName})
        } else {
          arr3.push(0)
        }
      }
      xData.push(arr1,arr2,arr3)
      let maxNum = 0;
      let maxArr = null
      arr1.forEach(item=>{
        if (typeof item == "object") {
          if (item.value > maxNum) {
            maxNum = item.value
            maxArr = item
          }
        }
      })
      this.areaName = ""
      if (maxArr) {
        this.areaName = maxArr.areaName
      }
      this.$refs.lineBar2.initEChart(categorys,xData)
    },
    handleEmit(){
      this.numList.push(true);
      if (this.numList.length == 2) {
        this.$emit("ok")
      }
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(~@/assets/less/studentFiles.css); 
</style>
